<template>
	<div class="about">
		<div class="navigation">
			<van-nav-bar title="个人信息" left-arrow @click-left="onClickLeft" />
		</div>
		<div class="tx">
			<van-cell is-link @click="showPopup">头像</van-cell>
		<van-popup v-model="show"><img src="../../public/666.jpg" alt=""></van-popup>
		</div>
		<div class="tp"><img src="../../public/666.jpg" alt=""></div>
		<div class="main">
			<van-cell title="昵称" is-link />
			<van-cell title="性别" is-link />
			<van-cell title="生日" is-link />
		</div>
		<div class="dl">
			<van-button type="primary" size="large">确定</van-button>
		</div>
		<div class="db"></div>
	</div>
</template>

<script>
	import {
		Toast
	} from 'vant';

	export default {
		data() {
			return {
				show: false
			}
		},
		methods: {
			onClickLeft() {
				Toast('返回');
			},
			showPopup() {
				this.show = true;
			}
		}
	}
</script>

<style>
.tx img{
	width: 200px;
	height: 200px;
	border-radius: 50%;
}
.tp img{
	width: 25px;
	height: 25px;
	border-radius: 50%;
	margin-left: 310px;
	margin-top: -35px;
	position: absolute;
}
.dl .van-button {
		background-color: #07BE5E;
		border: none;
		color: #fff;
		margin-top: 20px;
		width: 300px;
		margin-left: 40px;
	}
	.about{
		background-color: #f7f8fa;
	}
	.db{
		background-color: #f7f8fa;
		height: 342px;
	}
	
</style>
